<template>
  <view class="bottom-tabbar">
    <button 
      class="tab-item" 
      :class="{ active: currentPage === 'survival' }"
      @click="switchTab('survival')"
    >
      <text class="tab-icon">🏝️</text>
      <text class="tab-text">生存</text>
    </button>
    <button 
      class="tab-item" 
      @click="openMapModal"
    >
      <text class="tab-icon">🗺️</text>
      <text class="tab-text">地图</text>
    </button>
    <button 
      class="tab-item" 
      @click="openInventoryModal"
    >
      <text class="tab-icon">🎒</text>
      <text class="tab-text">背包</text>
    </button>
    <button 
      class="tab-item" 
      @click="openBuildingsModal"
    >
      <text class="tab-icon">🏗️</text>
      <text class="tab-text">建筑</text>
    </button>
    <button 
      class="tab-item" 
      @click="openTechModal"
    >
      <text class="tab-icon">🔬</text>
      <text class="tab-text">科技</text>
    </button>
    <button 
      class="tab-item" 
      @click="openSettingsModal"
    >
      <text class="tab-icon">⚙️</text>
      <text class="tab-text">设置</text>
    </button>
  </view>
</template>

<script>
export default {
  name: 'GameTabBar',
  props: {
    currentPage: {
      type: String,
      required: true
    }
  },
  methods: {
    switchTab(page) {
      this.$emit('switch-tab', page)
    },
    
    openMapModal() {
      this.$emit('open-map-modal')
    },
    
    openInventoryModal() {
      this.$emit('open-inventory-modal')
    },
    
    openBuildingsModal() {
      this.$emit('open-buildings-modal')
    },
    
    openTechModal() {
      this.$emit('open-tech-modal')
    },
    
    openSettingsModal() {
      this.$emit('open-settings-modal')
    }
  }
}
</script>

<style scoped>
/* 底部TabBar */
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #374151;
  display: flex;
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  background: transparent;
  border: none;
  color: #9ca3af;
  transition: all 0.3s ease;
  padding: 16rpx 8rpx;
}

.tab-item.active {
  color: #667eea;
}

.tab-item:active {
  transform: scale(0.95);
}

.tab-icon {
  font-size: 32rpx;
}

.tab-text {
  font-size: 20rpx;
  font-weight: 500;
}
</style>